import React, {useState} from "react";
import {Avatar, Button, Card, Flex, Space, Typography} from "antd";
import {DownOutlined, UpOutlined, UserOutlined} from "@ant-design/icons";
import "./MessageCard.css"

const {Text} = Typography;

/**
 * 展示消息卡片
 * @param {string} type
 * @param {string} message
 * @param analysis
 * @returns {Element}
 */
export function MessageCard({type, message, analysis}) {
  const [showAnalysis, setShowAnalysis] = useState(false);

  if (type === "user") {
    return (
      <Flex justify="flex-end" align="center" style={{marginBottom: '12px'}}>
        <Flex vertical align="flex-end">
          <Card className="user-message">
            <Text>{message}</Text>
          </Card>

          <Button
            type="text"
            icon={showAnalysis ? <DownOutlined/> : <UpOutlined/>}
            onClick={() => setShowAnalysis(!showAnalysis)}
            className="analysis-button"
          >
            分析
          </Button>

          {showAnalysis && analysis && (
            <Card className="analysis-panel" size="small">
              <Space direction="vertical" size="small">
                <div><strong>语法:</strong> {analysis.grammar}</div>
                <div><strong>发音:</strong> {analysis.pronunciation.pronAnalysis}</div>
              </Space>
            </Card>
          )}
        </Flex>
        <div style={{alignSelf: "flex-start", marginLeft: "12px", marginTop: '16px'}}>
          <Avatar icon={<UserOutlined/>}/>
        </div>
      </Flex>
    );
  } else if (type === "assistant") {
    return (
      <Flex justify="flex-start" align="center" style={{marginBottom: '12px'}}>
        <Avatar style={{marginRight: '12px'}}>U</Avatar>
        <Flex vertical align="flex-start">
          <Card className="assistant-message">
            <Text>{message}</Text>
          </Card>
        </Flex>
      </Flex>
    );
  }

  return null;
}

export default MessageCard;
